// pages/details/shopDetail.js
const app = getApp()
import Api from '../../utils/api';
import util from '../../utils/util';


Page({

  /**
   * 页面的初始数据
   */
  data: {
    shopIsColl: false, //查看是否收藏状态
    closePhotosAlbumFlag: false,//首次弹出访问相册授权窗口
    loginFlag: false,
    id: '', //商品id
    goodsDetailInfo: {}, //商品基本信息
    goodsBanner: [], //轮播图
    // poster: true, //海报详情特展示 flase为只是海报展示
    //show: true, //图片详情特展示 flase为只是图片展示
    isCartPopup: false, //是否弹出加入购物车
    num: 1, //购物数量默认为1
    goodsDetailInfo: {}, //加入购物车的商品信息
    shoppingDataLength: 0, //页面刚加载获取购物车的数量
    shareViewOpen: false, // 分享框显示标识
    userInfo: {}, //用户信息
    portrait_temp: "", //头像
    _productImg: '',
    wxName: null, //昵称
    bgPath: '/img/background.png', //背景
    qrcode_temp: '', //小程序码
    huiImg: '/img/hui-img01.png',
    showDialog: false,
    windowWidth: 375,
    windowHeight: 603,
    istemplate: false,
    commentPage: 1, //评价起始页
    commentSize: 1, //评价每页显示大小
    commentList: [], //评价列表
    commentTotalNum: 0, //评价总条数
    isCollectionGoods: false, //是否已收藏商品
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let _this = this;
    console.log(options)
    if (options.id != undefined) {
      _this.setData({
        id: options.id,
      })
    }
    _this.indexAllData();

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    let _this = this;
    wx.createSelectorQuery().select('.canvas-box').boundingClientRect(function(rect) {
      if (rect.width >= 375) {
        _this.setData({
          windowWidth: 375, // 节点的宽度
          windowHeight: 603 // 节点的高度
        })
      } else {
        _this.setData({
          windowWidth: 320, // 节点的宽度
          windowHeight: 504 // 节点的高度
        })
      }

    }).exec();
    var third_Session = wx.getStorageSync('third_Session');
    if (third_Session && !app.globalData.shoppingDataLength) {
      Api.searchCart().then(res => {
        //console.log(res);
        if (res.data.length > 0) {
          _this.setData({
            shoppingDataLength: res.data.length,
          });
        } else {
          _this.setData({
            shoppingDataLength: 0
          })
        }
      })
    } else {
      _this.setData({
        shoppingDataLength: app.globalData.shoppingDataLength
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log('onShow');
    this.isProductRelease();
    if (this.data.loginFlag) {
      Api.searchCart().then(res => {
        console.log(res);
        if (res.data.length > 0) {
          this.setData({
            shoppingDataLength: res.data.length,
          })
        }
      })
      this.getGoodsDetailInfo();
    }
    //查询是否收藏
    if (wx.getStorageSync('third_Session')) {
      this.isCollectionGoods(this.data.id);
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
   
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    if (app.globalData.addGoodsSuc) {
      app.loadCartNum();
      app.globalData.addGoodsSuc = false;
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    app.globalData.otherPageHideFlag = true;
    console.log('商品分享===用户点击右上角分享otherPageHideFlag==', app.globalData.otherPageHideFlag)
    var that = this;
    return {
      title: that.data.goodsDetailInfo.title,
      path: '/pages/details/shopDetail?id=' + that.data.id + '&title=' + JSON.stringify(that.data.goodsDetailInfo.title),
    }
    setTimeout(function() {
      that.setData({
        shareViewOpen: false
      })
    }, 2000)
  },
  //首次加载进来获取的全部数据
  indexAllData() {
    let _this = this;
    //获取详情页基本信息
    _this.getGoodsDetailInfo();
    //查询商品是否时收藏
    // _this.isCollData();
  },

  //获取详情页基本信息
  getGoodsDetailInfo() {
    let _this = this;
    Api.getGoodsDetailInfo(_this.data.id).then(res => {
      console.log('商品详情', res.data)
      console.log('商品轮播图片', JSON.parse(res.data.image))

      let nodes = res.data.detailImage
        // .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
        // .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
        // .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
        // .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
        .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img class="phos" $1 ')

      //数据绑定
      _this.setData({
        goodsDetailInfo: res.data,
        goodsBanner: JSON.parse(res.data.image),
        ['goodsDetailInfo.detailImage']: nodes
      })
      console.log(_this.data.goodsDetailInfo.detailImage)
      //判断店铺状态
      if (res.data.del) {
        //提示
        wx.showToast({
          icon: 'none',
          title: '商品已下架',
        })
      }
      //查询商品详情
      _this.queryGoodsComment(_this.data.id);
    })
  },

  //展示加入购物车弹出框
  showCart() {
    let _this = this;
    _this.setData({
      isCartPopup: true
    })
  },
  //关闭加入购物车弹出框
  colseCart() {
    let _this = this;
    _this.setData({
      isCartPopup: false,
    })
  },

  //减少数量
  subNum() {
    let _this = this;
    if (_this.data.num > 1) {
      _this.setData({
        num: _this.data.num - 1
      })
    }
  },
  //添加数量
  addNum() {
    let _this = this;
    _this.setData({
      num: _this.data.num + 1
    })
  },

  demo() {
    return zls;
  },


  //加入购物车接口
  addCart() {
    let _this = this
    Api.addCart(_this.data.goodsDetailInfo.id, _this.data.num).then(res => {
      console.log("加入购物车接口", res)
      wx.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 2000
      })
     app.globalData.addGoodsSuc=true;
      Api.searchCart().then(res => {
        console.log(res);
        if (res.data.length > 0) {
          _this.setData({
            shoppingDataLength: res.data.length,
          })
        }
      })
      _this.setData({
        isCartPopup: false,
      })
      app.loadCartNum();
    })
  },

  /**
   * 点击详情页的分享图标事件
   */
  share: function() {
    var _this = this;
    _this.setData({
      shareViewOpen: !_this.data.shareViewOpen,
      userInfo: wx.getStorageSync("userInfo")
    })
  },

  /**
   * 分享事件
   */
  shareImage(event) {
    var _this = this;
    wx.showLoading({
      title: '加载中',
    });

    //下载商品图片到本地（网络图片canvas无法绘制） - 热销
    wx.downloadFile({
      url: _this.data.goodsBanner[0],
      success: (res) => {
        console.log(res)
        _this.setData({
          _productImg: res.tempFilePath
        });
        // 获取头像到本地 ，做分享绘制图片用（网络图片无法绘制）  
        wx.downloadFile({
          url: _this.data.userInfo.avatarUrl,
          success(res) {
            console.log(res)
            if (res.statusCode === 200) {
              // console.log("=====看看头像图片下载到本地打印的是啥???======")
              //console.log(res)
              let image = res.tempFilePath
              console.log(image)
              _this.setData({
                portrait_temp: image
              });
              //下载小程序码到本地（网络图片canvas无法绘制） - 
              wx.downloadFile({
                url: _this.data.goodsDetailInfo.miniCode,
                success: (res) => {
                  console.log(res)
                  _this.setData({
                    qrcode_temp: res.tempFilePath
                  });
                  wx.hideLoading();
                  if (_this.data.portrait_temp == '' && _this.data._productImg == '') {
                    return;
                  }
                  _this.setData({
                    // portrait_temp: _this.data.userInfo.avatarUrl,
                    wxName: _this.data.userInfo.nickName,
                    shareViewOpen: !_this.data.shareViewOpen
                  })
                  //缓存canvas绘制小程序二维码
                  _this.drawImage();
                  wx.hideLoading();
                  setTimeout(function() {
                    _this.canvasToImage()
                  }, 200)
                },
              });
            }
          }
        })
      },
    });

  },
  drawImage() {
    var _this = this;
    var bgPath = _this.data.bgPath;
    // var portraitPath = _this.data.portrait_temp
    var hostNickname = _this.data.wxName
    var productImg = _this.data._productImg
    var _spPrice = _this.data.goodsDetailInfo.price
    var _spName = _this.data.goodsDetailInfo.title
    var qrPath = _this.data.qrcode_temp
    let huiImg = _this.data.huiImg
    var w = _this.data.windowWidth
    var h = _this.data.windowHeight
    //绘制canvas图片    
    const ctx = wx.createCanvasContext('myCanvas')
    console.log("获取手机的宽度", w)
    if (w < 375) {
      //绘制背景图片
      //ctx.setStrokeStyle('#fff')
      ctx.setFillStyle('white');
      ctx.save()
      ctx.beginPath()
      ctx.fillRect(0, 0, _this.data.windowWidth, _this.data.windowHeight);
      ctx.arc(50, 35, 25, 0, 2 * Math.PI)
      ctx.fill()
      ctx.clip()
      ctx.drawImage(_this.data.portrait_temp, 25, 10, 50, 50)
      ctx.restore()
      // //生成用户ID 微信名
      ctx.setFillStyle('#999999')
      ctx.setFontSize(12)
      ctx.setTextAlign('left')
      ctx.fillText(hostNickname, 100, 22)
      // // 文字
      ctx.setFillStyle('#000000')
      ctx.setFontSize(16)
      ctx.setTextAlign('left')
      ctx.fillText('我喜欢的商品，你也来看看', 100, 50)

      //生成商品图片
      ctx.drawImage(productImg, 25, 65, 270, 270)

      //商品名称
      ctx.setFillStyle('#666666')
      ctx.setFontSize(14)
      ctx.setTextAlign('left')
      if (_spName.length > 15) {
        _spName = _spName.substring(0, 15);
        _spName += '...';
        console.log(_spName)
      }
      ctx.fillText(_spName, 25, 360)
      // //商品价格
      ctx.setFillStyle('#FF154C')
      ctx.setFontSize(24)
      ctx.setTextAlign('left')
      ctx.fillText("￥" + _spPrice, 20, 390)

      // //绘制二维码
      ctx.drawImage(qrPath, 220, 335, 80, 80)
      // //点击识别查看商品
      ctx.setFillStyle('#999999')
      ctx.setFontSize(12)
      ctx.setTextAlign('center')
      ctx.fillText('长按识别查看商品', 250, 430)
      //生成惠生活图片
      ctx.drawImage(huiImg, 0, 440, 320, 40)

      ctx.setFillStyle('#999999')
      ctx.setFontSize(10)
      ctx.setTextAlign('center')
      ctx.fillText('本地实体店打折、促销、新品、爆品一网打尽', 320 / 2, 495)
      ctx.draw();
      return;
    }
    //绘制背景图片
    //ctx.setStrokeStyle('#fff')
    ctx.setFillStyle('white');
    ctx.save()
    ctx.beginPath()
    ctx.fillRect(0, 0, _this.data.windowWidth, _this.data.windowHeight);
    ctx.arc(50, 35, 25, 0, 2 * Math.PI)
    ctx.fill()
    ctx.clip()
    ctx.drawImage(_this.data.portrait_temp, 25, 10, 50, 50)

    ctx.restore()
    // //生成用户ID 微信名
    ctx.setFillStyle('#999999')
    ctx.setFontSize(12)
    ctx.setTextAlign('left')
    ctx.fillText(hostNickname, 100, 22)

    // // 文字
    ctx.setFillStyle('#000000')
    ctx.setFontSize(16)
    ctx.setTextAlign('left')
    ctx.fillText('我喜欢的商品，你也来看看', 100, 50)

    //生成商品图片
    ctx.drawImage(productImg, 25, 80, 327.5, 327.5)

    //商品名称
    ctx.setFillStyle('#666666')
    ctx.setFontSize(14)
    ctx.setTextAlign('left')
    console.log(_spName)
    if (_spName.length > 18) {
      _spName = _spName.substring(0, 18)
      _spName = _spName + '...'
      console.log(_spName)
    }
    ctx.fillText(_spName, 25, 430)

    // //商品价格
    ctx.setFillStyle('#FF154C')
    ctx.setFontSize(24)
    ctx.setTextAlign('left')
    ctx.fillText("￥" + _spPrice, 20, 470)

    // //绘制二维码
    ctx.drawImage(qrPath, 270, 420, 80, 80)
    // //点击识别查看商品
    ctx.setFillStyle('#999999')
    ctx.setFontSize(15)
    ctx.setTextAlign('center')
    ctx.fillText('长按识别查看商品', 290, 520)
    //生成惠生活图片
    ctx.drawImage(huiImg, 0, 530, 375, 40)

    ctx.setFillStyle('#999999')
    ctx.setFontSize(10)
    ctx.setTextAlign('center')
    ctx.fillText('本地实体店打折、促销、新品、爆品一网打尽', 375 / 2, 586)
    ctx.draw();
  },

  canvasToImage() {
    var _this = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: _this.data.windowWidth * 2,
      height: _this.data.windowHeight * 2,
      destWidth: _this.data.windowWidth * 2,
      destHeight: _this.data.windowHeight * 2,
      canvasId: 'myCanvas',
      success: function(res) {
        console.log('朋友圈分享图生成成功:' + res.tempFilePath)
        _this.setData({
          shareImgSrc: res.tempFilePath,
          showDialog: true,
        })
        // wx.previewImage({
        //   current: 'www.ooago.com', // 当前显示图片的http链接
        //   urls: [res.tempFilePath] // 需要预览的图片http链接列表
        // })
      },
      fail: function(err) {
        console.log('失败')
        console.log(err)
      }

    })
  },

  //长按保存图片
  /**
   * 保存图片
   */
  save: function() {
    //wx.saveImageToPhotosAlbum将图片保存到本地  3
    var _this = this;
    wx.saveImageToPhotosAlbum({
      filePath: _this.data.shareImgSrc,
      success(res) {
        console.log(111)
        wx.hideLoading();
        wx.showModal({
          title: '存图成功',
          content: '图片成功保存到相册了，去发朋友圈噻~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              _this.setData({
                showDialog: false
              })
              console.log('用户点击确定');
            }
          }
        })
      },
      fail(err) {
        console.log(err, _this.data.closePhotosAlbumFlag, '_this.data.closePhotosAlbumFlag')
        // 用户点击授权访问相册的取消按钮
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
          console.log('saveImageToPhotosAlbum：失败函数')
          if (_this.data.closePhotosAlbumFlag) {
            wx.showModal({
              title: '您已限制访问相册',
              content: '是否重新授权？',
              success: function(res) {
                if (res.confirm) {
                  wx.openSetting({
                    success(settingdata) {
                      console.log(settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                        wx.showToast({
                          title: '获取权限成功',
                          icon: 'success',
                          duration: 2000,
                        })
                      } else {
                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                        wx.showToast({
                          title: '获取权限失败！',
                          icon: 'none',
                          duration: 2000,

                        })
                      }
                    },
                    fail(error) {
                      console.log(error)
                    }

                  })
                } else if (res.cancel) {
                  wx.showToast({
                    title: '已取消重新授权',
                    icon: 'none'
                  })
                  return
                }
              }
            })
          } else {
            console.log('用户点击授权访问相册的取消按钮')
          }
          _this.setData({
            closePhotosAlbumFlag: true
          })

        }
      }
    })


  },
  //判断产品发布信息
  isProductRelease() {
    let _this = this;
    Api.isProductRelease().then(res => {
      console.log('进入标记查询', res)
      _this.setData({
        istemplate: res.data,
        shareViewOpen: false
      })
    }).catch(err => {
      _this.setData({
        istemplate: true
      })
    });
  },
  //查询商品评论
  queryGoodsComment(goodsId) {
    var _this = this;
    //组装查询条件
    let data = {
      goodsId: goodsId,
      isDel: false,
    };
    //请求数据
    Api.queryGoodsComment(this.data.commentPage, this.data.commentSize, data).then(res => {
      console.log('商品评论', res)
      _this.setData({
        commentList: res.data.dataList,
        commentTotalNum: res.data.numTotal
      });
    });
  },

  //查看全部评论
  searchAllClick(e) {
    console.log(e.currentTarget.dataset.goodsid)
    let id = e.currentTarget.dataset.goodsid;
    wx.navigateTo({
      url: `/pages/comment/comment?goodsId=${id}`
    })
  },
  // 绘出页面到盆友圈页面关闭事件
  closeShare: function() {
    this.setData({
      showDialog: false
    })
  },
  //查询是否收藏商品
  isCollectionGoods: function(goodsId) {
    var _this = this;
    Api.isGoodsCollection(goodsId).then(res => {
      console.log('是否已收藏', res);
      _this.setData({
        isCollectionGoods: res.data
      });
    });
  },
  //收藏商品
  collectionOrCancelGoods() {
    var _this = this;
    console.log(this.data.id, this.data.isCollectionGoods);
    if (this.data.isCollectionGoods) {
      //取消收藏
      Api.cancelGoodsCollection(this.data.id).then(res => {
        _this.setData({
          isCollectionGoods: false
        });
        wx.showToast({
          title: '已取消收藏',
          icon: 'none',
        })
      });
    } else {
      //收藏商品
      Api.goodsCollection(this.data.id).then(res => {
        _this.setData({
          isCollectionGoods: true
        });
        wx.showToast({
          title: '已收藏',
          icon: 'success',
        })
      });

    }

  }

})